<template>
	<default-header-page-layout ref="page" title="任务查询" :back-custom="true" @back="onPageBack">
		<view class="my-page-body" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<list-view v-show="pageType==='list'" :resetflag.sync="resetflag" ref="list" @query="onListQuery" @action="onListAction" />
			<list-search v-show="pageType==='search'" :resetflag="resetflag" @callback="onSearchCallBack"  />
			<task-detail v-show="pageType==='detail'" ref="detail" :item="actionRow" />
		</view>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ListView from './module/List.vue'
import ListSearch from './module/Search.vue'
import TaskDetail from './module/Detail.vue'
let initInterVal = null;
export default {
	name:'tasksPage',
	components:{DefaultHeaderPageLayout,ListView,ListSearch,TaskDetail},
	data(){
		return {
			pageBodyHeight:0,
			pageType:'list',
			resetflag:0,
			query:null,
			actionRow:{},
			listReturn:false
		}
	},
	watch:{
		pageType(newVal, oldVal){
			if (newVal !== oldVal) {
			  if (newVal) {
			    this.switchPage();
			  }
			}
		},
		resetflag(newVal, oldVal){
			if (newVal !== oldVal) {
			  this.query = null
				this.$refs.list.newList(this.query)
			}
		}
	},
	methods:{
		onPageBack(){
			if (this.pageType === 'search' || this.pageType === 'detail') {
				if (this.pageType === 'detail') {
					this.$refs.detail.reset()
				}
				this.listReturn = true;
				this.pageType = 'list'
			} else {
				uni.redirectTo({url:this.$config.path.home});
			}
		},
		onListQuery(){
			this.pageType = 'search'
		},
		onListAction(obj){
			this.actionRow = obj
			this.pageType = 'detail'
		},
		onSearchCallBack(params){
			this.query = params;
			this.pageType = 'list'
		},
		switchPage(){
			this.$nextTick(()=>{
				switch (this.pageType){
					case 'list':
						if (!this.listReturn) {
							this.$refs.list.newList(this.query)
						} else {
							this.listReturn = false;
						}
						break;
					case 'detail':
						this.$refs.detail.init()
						break;
					default:
						break;
				}
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
			this.switchPage()
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
</style>